import { useMultipleTabsStoreWithOut } from '@/store/module/useMultipleTabsStore';
import { IMultipleTabs } from '@/store/types';
import { IToolDropMenu } from '@/components/types';
import { reactive, Ref, ref, watch } from 'vue';
import { RouteLocationNormalized, Router, RouteRecord, RouteRecordRaw, useRoute } from 'vue-router';
import { useGo, useRedo } from '@/hooks/router';
import { AsideMenuPath, HeaderRouterPath } from '@/router/types';

const multipleTabsStore = useMultipleTabsStoreWithOut();

export const useMultipleTabsTool = (_route: RouteLocationNormalized, _router: Router) => {
  const toolDropMenu = reactive<IToolDropMenu[]>([
    {
      title: 'message.layout.multipleTab.reload',
      icon: '',
      disabled: true,
      command: IToolDropEnum.RELOAD,
    },
    {
      title: 'message.layout.multipleTab.close',
      icon: '',
      disabled: true,
      command: IToolDropEnum.CLOSE,
    },
    {
      title: 'message.layout.multipleTab.closeLeft',
      icon: '',
      divided: true,
      disabled: true,
      command: IToolDropEnum.CLOSELEFT,
    },
    {
      title: 'message.layout.multipleTab.closeRight',
      icon: '',
      disabled: true,
      command: IToolDropEnum.CLOSERIGHT,
    },
    {
      title: 'message.layout.multipleTab.closeOther',
      icon: '',
      divided: true,
      disabled: true,
      command: IToolDropEnum.CLOSEOTHER,
    },
    {
      title: 'message.layout.multipleTab.closeAll',
      icon: '',
      disabled: true,
      command: IToolDropEnum.CLOSEALL,
    },
  ]);
  const route = useRoute();
  const redo = useRedo(_router);
  watch(
    () => multipleTabsStore.data,
    (value) => {
      const fullPath = route.fullPath;
      const currentIndex = value.findIndex((value) => {
        return value.name === fullPath;
      });
      toolDropMenu.forEach((value) => {
        value.disabled = true;
      });
      if (value.length > 0) {
        toolDropMenu[0].disabled = false;
      }
      if (value.length > 1) {
        toolDropMenu[1].disabled = false;
        toolDropMenu[4].disabled = false;
        toolDropMenu[5].disabled = false;
      }
      if (value.length > 1 && currentIndex !== 0) {
        toolDropMenu[2].disabled = false;
      }
      if (value.length > 1 && currentIndex !== value.length - 1) {
        toolDropMenu[3].disabled = false;
      }
    },
    { deep: true, immediate: true }
  );

  const commandFn = (command: IToolDropEnum) => {
    const fullPath = route.fullPath;
    const go = useGo(_router);
    switch (command) {
      case IToolDropEnum.RELOAD:
        redo();
        break;
      case IToolDropEnum.CLOSE:
        if (multipleTabsStore.data.length === 1) {
          return;
        }
        const currentIndex = multipleTabsStore.data.findIndex((value) => {
          return value.name === fullPath;
        });
        const nextIndex =
          currentIndex === multipleTabsStore.data.length - 1 ? currentIndex - 1 : currentIndex + 1;
        const nextTab = multipleTabsStore.data[nextIndex];
        multipleTabsStore.removeTab(fullPath);
        go(nextTab.name as unknown as RouteRecordRaw);
        break;
      case IToolDropEnum.CLOSELEFT:
        multipleTabsStore.closeBeforeTabs(_route.fullPath);
        break;
      case IToolDropEnum.CLOSERIGHT:
        multipleTabsStore.closeAfterTabs(_route.fullPath);
        break;
      case IToolDropEnum.CLOSEOTHER:
        multipleTabsStore.closeOtherTabs(_route.fullPath);
        break;
      case IToolDropEnum.CLOSEALL:
        multipleTabsStore.clearTabs();
        if (route.fullPath === AsideMenuPath.CLASSA) {
          multipleTabsStore.addTab({
            title: route.meta.title!,
            name: route.fullPath,
          });
        }
        go(HeaderRouterPath.DATASHOW);
        break;
    }
  };

  return {
    toolDropMenu,
    commandFn,
  };
};

export enum IToolDropEnum {
  RELOAD,
  CLOSE,
  CLOSELEFT,
  CLOSERIGHT,
  CLOSEOTHER,
  CLOSEALL,
}
